﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Customize series items</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
</head>
<body>
    <h1>Customize series items</h1>
    <input type="button" value="OpenChart" onclick="showChartWindow();"/>
    <div id="win1" class="mini-window" title="Customize series items" style="width:480px;height:350px;" 
        showModal="true" allowResize="true" 
        >
        <div id="chartContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script src="YUI2/yahoo-dom-event.js" type="text/javascript"></script>
<script src="YUI2/element-min.js" type="text/javascript"></script>
<script src="YUI2/charts-min.js" type="text/javascript"></script>
<script src="YUI2/datasource-min.js" type="text/javascript"></script>
<script src="YUI2/json.js" type="text/javascript"></script>
<script src="YUI2/swf/swf-min.js" type="text/javascript"></script>
<script type="text/javascript">
    mini.parse();

    var chartContainerId = "chartContainer";
    function showChartWindow() {
        var win = mini.get("win1");
        win.show();
        buildChart();
    }
    showChartWindow();
    
function buildChart(){
    YAHOO.widget.Chart.SWFURL = "YUI2/swf/charts.swf";
    
    YAHOO.namespace("demo");
    YAHOO.demo.monthlyExpenses =
	[
		{ 
			month: "January", 
			rent: -1280.00, 
			utilities: -494.68, 
			gamblingprofits:292.00, 
			gamblinglosses:-85.00, 
			pay:2450.00, 
			incidentals:-654.32
		},
		{ 
			month: "February", 
			rent: -1280.00, 
			utilities: -401.35, 
			gamblingprofits:292.00, 
			gamblinglosses:-185.00, 
			pay:2450.00, 
			incidentals:-432.26
		},
		{ 
			month: "March", 
			rent: -1280.00, 
			utilities: -489.32, 
			gamblingprofits:292.00, 
			gamblinglosses:-485.00, 
			pay:2450.00, 
			incidentals:-523.33
		},
		{ 
			month: "April", 
			rent: -1280.00, 
			utilities: -484.71, 
			gamblingprofits:292.00, 
			gamblinglosses:-185.00, 
			pay:2450.00, 
			incidentals:-765.45
		},
		{ 
			month: "May", 
			rent: -1310.00, 
			utilities: -479.811, 
			gamblingprofits:292.00, 
			gamblinglosses:-485.00, 
			pay:2450.00, 
			incidentals:-555.11
		},
		{ 
			month: "June", 
			rent: -1310.00, 
			utilities: -497.95, 
			gamblingprofits:292.00, 
			gamblinglosses:-220.00, 
			pay:2450.00, 
			incidentals:-633.48
		}
	];
	function calculateNet(dataArray)
	{ 
		var len = dataArray.length;
		var obj, net;
		for(var i = 0; i < len; i++)
		{
			obj = dataArray[i];
			net = 0;
			for(var z in obj)
			{
				if (!isNaN(obj[z])) net += obj[z];
			}
			obj.net = net;
		} 
		return dataArray;
	}
	var DataSource = new YAHOO.util.DataSource( calculateNet(YAHOO.demo.monthlyExpenses) );
	DataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	DataSource.responseSchema =
	{
		fields: [ "month", "rent", "utilities", "gamblinglosses", "gamblingprofits", "pay", "incidentals", "net" ]
	};
	
	YAHOO.demo.formatCurrencyAxisLabel = function( value )
	{
		return YAHOO.util.Number.format( value,
		{
			prefix: "$",
			thousandsSeparator: ",",
			decimalPlaces: 2
		});
	}
	
	YAHOO.demo.getDataTipText = function( item, index, series )
	{
		var toolTipText = series.displayName + " for " + item.month;
		toolTipText += "\n" + YAHOO.demo.formatCurrencyAxisLabel( Math.abs(item[series.yField]) );
		return toolTipText;
	}
	
	YAHOO.demo.gainsLossesDataTipFunction = function( item, index, series )
	{
		var amt = item[series.yField];
		var toolTipText = series.displayName + (amt >= 0 ? " Gains" : " Losses") + " for " + item.month;;
		toolTipText += "\n" + YAHOO.demo.formatCurrencyAxisLabel( Math.abs(amt) );
		return toolTipText; 
	}
	
	YAHOO.demo.getLegendLabelText = function(value)
	{
		return value;
	}
	
	YAHOO.demo.getGamblingLegendLabelText = function(value)
	{
		return value + " (wins/losses)";
	}
	
	var seriesDef =
	[
		{ 
			displayName: "Rent", 
			yField: "rent", 
			style:{borderColor:0x006600} 
		},
		{ 
			displayName: "Utilities", 
			yField: "utilities", 
			style:{borderColor:0x006699}
		},
		{ 
			displayName: "Gambling", 
			yField:"gamblingprofits", 
			style:{borderColor:0x000000, fillColor:0xff0000}, 
			legendLabelFunction:YAHOO.demo.getGamblingLegendLabelText,
			dataTipFunction:YAHOO.demo.gainsLossesDataTipFunction
		},
		{ 
			displayName: "Gambling", 
			yField:"gamblinglosses", 
			style:{borderColor:0x000000, fillColor:0xff0000}, 
			showInLegend:false,
			dataTipFunction:YAHOO.demo.gainsLossesDataTipFunction
		 },
		{ 
			displayName: "Pay", 
			yField:"pay", 
			style:{borderColor:0x000000} 
		},
		{ 
			displayName: "Misc.", 
			yField:"incidentals", 
			style:{borderColor:0x660000}
		},
		{ 
			type:"line", 
			displayName: "Net", 
			yField:"net", 
			style:{fillColor:0xdddeee, borderColor:0x0000ff, lineColor:0x0000ff, skin:"DiamondSkin"}, 
			dataTipFunction:YAHOO.demo.gainsLossesDataTipFunction
		}
	];
	
	var currencyAxis = new YAHOO.widget.NumericAxis();
	currencyAxis.labelFunction = YAHOO.demo.formatCurrencyAxisLabel;
	currencyAxis.title = "Money Gained";

	var categoryAxis = new YAHOO.widget.CategoryAxis();
	categoryAxis.title = "Month";
	
	var styleDef = 
	{
		font:{color:0xeeeeee},
		background:{color:0x677164},
		border:{size:1, color:0x000000},
		yAxis:
		{
			titleRotation:90, 
			color:0xeeeeee, 
			titleFont:{color:0xeeeeee}, 
			majorGridLines:{color:0xeeeeee}, 
			minorTicks:{display:"none"}, 
			majorTicks:{display:"none"}
		},
		xAxis:
		{
			color:0xeeeeee, 
			titleFont:{color:0xeeeeee}
		},
		legend:
		{
			display: "bottom",
			padding: 10,
			spacing: 5,
			font:
			{
				color:0xeeeeee,
				family: "Arial",
				size: 11
			}
		}
	}
	
	var mychart = new YAHOO.widget.ColumnChart( chartContainerId, DataSource,
	{
		series: seriesDef,
		xField: "month",
		yAxis: currencyAxis,
		xAxis: categoryAxis,
		style: styleDef,
		legendLabelFunction: YAHOO.demo.getLegendLabelText,
		dataTipFunction: YAHOO.demo.getDataTipText
	});
}
</script>